<template>
  <el-dialog
    v-model="visible"
    title="选择图片"
    width="80%"
    top="5vh"
    destroy-on-close
  >
    <ContentWrap>
      <!-- 搜索栏 -->
      <el-form :model="queryParams" :inline="true" class="-mb-15px">
        <el-form-item label="文件名" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入文件名"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" /> 重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 图片列表 -->
      <el-table
        v-loading="loading"
        :data="list"
        @row-click="handlePreview"
        class="image-table"
      >
        <el-table-column label="预览" width="120">
          <template #default="{ row }">
            <el-image
              class="h-80px w-80px cursor-pointer"
              :src="row.url"
              :preview-src-list="[row.url]"
              fit="cover"
            />
          </template>
        </el-table-column>
        <el-table-column label="文件名" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="文件路径" prop="path" :show-overflow-tooltip="true" />
        <el-table-column label="操作" width="80">
          <template #default="{ row }">
            <el-button type="primary" link @click.stop="handleSelect(row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import * as FileApi from '@/api/infra/file'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const loading = ref(false)
const total = ref(0)
const list = ref<any[]>([])

// 查询参数（自动过滤图片类型）
const queryParams = reactive({
  pageNo: 1,
  pageSize: 12,
  name: undefined,
  type: 'image/%' // 只查询图片类型
})

// 获取数据
const getList = async () => {
  try {
    loading.value = true
    const data = await FileApi.getFilePage(queryParams)
    list.value = data.list
    total.value = data.total
  } catch (e) {
    ElMessage.error('加载失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

// 重置
const resetQuery = () => {
  queryParams.name = undefined
  handleQuery()
}

// 暴露打开方法
const open = () => {
  visible.value = true
  getList()
}

// 选择事件
const emit = defineEmits(['select'])
const handleSelect = (row: any) => {
  emit('select', row)
  visible.value = false
}

// 图片预览处理
const handlePreview = (row: any) => {
  // 使用element默认预览
}

defineExpose({ open })
</script>

<style scoped>
.image-table {
  max-height: 60vh;
  overflow-y: auto;
}
</style>